<template>
<BasicContainer>
  <dc-section name="view-num">
    <template slot="body">
      <dc-section-item title="稿件播放量对比">
        <div class="upper-event-line"
          ref="upper-event-line"
          slot="body">
          <button-group class="btn_wrap" />
          <div v-if="arc_play_list.length">
          <div class="xlabel_wrap" ref="xlabel_wrap" :style="{'padding-left': 15 * maxTxtLen + 'px'}">
            <div class="xlabel-item" v-for="(item, index) in axisData" :key="item.id" ><span @mouseenter="onMouseEnter($event, item, index)" @mouseleave="onMouseLeave(item)">{{item.name}}</span></div>
          </div>
          <data-echart class="response_wrap" :opts="relationOpt[attention]"></data-echart>
          <!-- <chart ref="save-echart" :autoResize="true" :options="relationOpt[attention]" ></chart> -->
          </div>
          <div class="normal-empty" style="position: relative" v-else>
            <p>暂无数据</p>
          </div>
          <div class="hover-wrap" ref="hover-wrap">
            <div class="line"></div>
            <div class="circle" ref="circle"></div>
            <div class="toolTip_wrap" ref="toolTip_wrap">
              <div style="postion:absolute;max-width:400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size:14px">视频：{{params.length && params[0].title}}</div>
              <div style="margin-top:8px;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#23ADE5;"></span> 观看人数 : {{params.length && params[0].value}}</div>
            </div>
          </div>
        </div>
      </dc-section-item>
    </template>
  </dc-section>
</BasicContainer>
</template>
<script>
import DcSection from '../components/section'
import DcSectionItem from '../components/sectionItem'
import ButtonGroup from '../components/buttonGroup'
// import { monthDay } from 'app/util'
import DataEchart from '../components/dataEchart'
import BasicContainer from '../common/basicContainer.vue'

export default {
  name: 'viewNum',
  data() {
    return {
      bvIds: [],
      avNames: [],
      viewNum: [],
      // upperRangeOne: 'article',
      attention: 'all',

      upperSelectOptionsOne: {
        article: '最近30个稿件'
      },
      upperSelectOptionsTwo: {
      },
      axisData: [],
      maxTxtLen: 1,
      params: [],
      arc_play_list: []
    }
  },
  computed: {
    relationOpt() {
      return {
        all: this.generateRelationOpt(this.arc_play_list),
        own: this.generateRelationOpt(this.arc_play_list),
        reprint: this.generateRelationOpt(this.arc_play_list)
      }
    }
  },
  mounted () {
    this.hoverWrap = this.$refs['hover-wrap']
    for (let i = 0; i < 10; i++) {
      this.arc_play_list.push({
        aid: 123,
        avg_duration: 107,
        bvid: '123',
        ctime: 1487953590,
        duration: 384,
        rate: 2786,
        title: '123' + i,
        view: 123 * i
      })
    }
  },
  methods: {
    onMouseEnter (evt, item, index) {
      let parent = this.$refs['upper-event-line'] && this.$refs['upper-event-line'].getBoundingClientRect()
      let ele = evt.target.parentNode.getBoundingClientRect()

      this.hoverWrap.style.display = 'block'
      this.hoverWrap.style.left = ele.x - parent.x + ele.width / 2 + 'px'
      this.hoverWrap.style.top = '280px'
      setTimeout(() => {
        let toolTip_wrap = this.$refs['toolTip_wrap']
        let toolTip_wrapRect =toolTip_wrap && toolTip_wrap.getBoundingClientRect()
        if (toolTip_wrapRect.x + toolTip_wrapRect.width > parent.x + parent.width - 20) {
          toolTip_wrap.style.left = (- toolTip_wrapRect.width - 20) + 'px' 
        } else {
          toolTip_wrap.style.left = 20 + 'px' 
        }
      }, 100)
      let chart = this.$refs['save-echart'] && this.$refs['save-echart'].chart
      let dataZoom = chart.getOption().dataZoom[0]
      let _index = index + dataZoom.startValue
      this.getHoverInfo(_index, item)
      let disValue = [...this.viewNum].slice(dataZoom.startValue, dataZoom.endValue)
      this.$refs['circle'].style.top = -this.viewNum[_index] / Math.max(...disValue) * 270 + 'px'

    },
    onMouseLeave () {
      this.hoverWrap.style.display = 'none'
    },
    getHoverInfo (index, item) {
      this.params = []
      this.params.push({
        seriesName: 'viewNum',
        value: this.viewNum[index],
        title: item.name
      })
    },
    generateRelationOpt(data) {
      let articleOpt = {}
      this.bvIds = []
      this.viewNum = []
      this.avNames = []
      this.bvIds= []
      let startValue,endValue
      if (data === null) {
        this.bvIds.push(0)
        this.avNames.push('该稿件暂无数据')
        this.viewNum.push(0)
        this.bvIds.push(0)
      } else {
        data = data.sort((item1, item2) => item1.ctime - item2.ctime)
        for (const item of data) {
          this.bvIds.push(`${item.title}`)
          this.viewNum.push(item.view < 0 ? 0 : item.view)
          this.avNames.push(item.title ? item.title : '')
        }
        startValue= data.length > 7 ? data.length - 6 : 0
        endValue = data.length
      }
      let maxNum = 0
      articleOpt = {
        xAxis: {
          data: this.bvIds,
          legend: {
            orient: 'vertical',
            left: '350px',
            top: '35px',
          },
          axisLabel: {
            // color: '#212121',
            interval: 0,
            formatter: (name, id) => {
              // let txt1 = name
              if (id === 0) {
                maxNum = 0
                this.axisData = [{name, id}]
              } else {
                this.axisData.push({name, id})
              }
              maxNum = Math.max(maxNum, this.viewNum[id])
              this.maxTxtLen = (maxNum.toString()).length
              // return `{txt1|${txt1}}`
              return '  '
            },
            rich: {
              txt1: {
                padding: [2,0,2,0],
                fontSize: 12,
                color: '#212121'
              },
              txt2: {
                fontSize: 12,
                color: '#757575',
                lineHeight: 16
              }
            },
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return `<div style="max-width:400px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">视频：${this.avNames[params[0].dataIndex]}</div>
                    <div style="margin-top:8px;"><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#23ADE5;"></span> 观看人数 : ${params[0].value}</div>`
          }
        },
        grid: {
          left: '0',
          right: '10',
          bottom: '50px',
          top: '10',
          show: false,
        },
        dataZoom: [{
          type: 'slider',
          show: true,
          textStyle: false,
          fillerColor: 'rgba(0,0,0, 0.052)',
          top: '89%',
          left: '5%',
          right: '5%',
          height: '24px',
          backgroundColor: '#F4F4F4',
          handleIcon: 'image://',
          dataBackground: {
            lineStyle: {
            //   color: '#E7E7E7',
              width: 0,
            },
            areaStyle: {
              color: 'rgb(200,201,200)'
            }
          },
          xAxisIndex: [0],
          borderColor: '#fff',
          startValue,
          endValue,
          minSpan: 2,
          handleStyle: {
          }
        }],
        series: [{
          // barWidth: '20px',
          type: 'line',
          // name: '观看人数',
          symbolSize: 4,
          data: this.viewNum,
          lineStyle: {
            normal: {
              color: '#55CBF2',
              width: 3
            },
          },
          areaStyle: {
            normal: {
              color: '#37C8F7',
              opacity: '0'
            }
          },
          itemStyle: {
            normal: {
              color: '#92ddff'
            }
          }
        }]
      }
      return articleOpt
    }
  },
  components: {
    DcSection,
    DcSectionItem,
    DataEchart,
    ButtonGroup,
    BasicContainer
  }
}

</script>
<style lang="less">
#dc-section_view-num {
  .dc-section-item_title_time {
    height: 32px;
    line-height: 32px;
  }
  .btn_wrap{
    margin-top: 20px;
    margin-bottom: 24px;
  }
  .dc-radio-group{
    margin-top: 20px;
    margin-bottom: 32px;
  }
   .hover-wrap{
    position: absolute;
    display: none;
    .line{
      position: absolute;
      width: 1px;
      height: 268px;
      background: rgb(179, 179, 179);
      top: -268px;
      z-index: 10;
    }
    .circle{
      position: absolute;
      width: 11px;
      height: 11px;
      border: 1px solid #55CBF2;
      border-radius: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
    }
    .toolTip_wrap{
      position: absolute;
      border-style: solid;
      white-space: nowrap;
      z-index: 9999999;
      transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
      background-color: rgb(80, 80, 80);
      border-width: 0px;
      border-color: rgb(51, 51, 51);
      color: rgb(255, 255, 255);
      font: 14px / 21px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      padding: 12px;
      top: -150px;
      left: 20px;
      box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
      border-radius: 2px;
      pointer-events: none;
    }
  }
  canvas{
    cursor: pointer;
  }
  .upper-event-line{
    position: relative;
    .xlabel_wrap{
      display: flex;
      padding-left: 40px;
      padding-right: 8px;
      top: 288px;
      width: 100%;
      position: absolute;
      z-index: 10;
      .xlabel-item{
        flex:1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;

        font-size: 12px;
        color: #212121;
        letter-spacing: 0.5px;

        padding: 0 5px;
        span{
          cursor: pointer;
        }
      }
    }
  }
  .upper-tool-box {
    margin-top: 0px;
    height: 32px;
    .upper-line-legend {
      float: left;
      .legend-item {
        float: left;
        font-size: 12px;
        line-height: 32px;
        margin-right: 20px;
        .legend-text {
          display: inline-block;
          line-height: 20px;
          color: #999;
          vertical-align: middle;
        }
        [class^="icon-"] {
          display: inline-block;
          font-size: 18px;
          vertical-align: middle;
        }
        .icon-line {
          color: #37C8F7;
        }
        .icon-line1 {
          color: #FF7E9C;
        }
      }
    }
    .upper-line-select {
      float: right;
    }
  }
  .echarts.response_wrap {
    height: 350px;
    width: 100%;
  }
}

</style>
